<template>
  <div class="page-content">
    <div class="page-title">
      <span class="page-title-left">GPU云服务器 > </span><span class="page-title-right">GPU云服务器详情</span>
    </div>
    <div class="gpu-name">
      <a-icon :component="backIcon" style="fontSize: 24px;margin-top:18px;" />
      <span style="height:28px;">&nbsp;&nbsp;{{ gpuName }}</span>
    </div>
    <div class="gpu-tab-content">
      <a-tabs type="card" @change="callback">
        <a-tab-pane key="1" tab="Tab 1">
          <div class="tab-detail-title">
            <div class="tab-detail-title-name">{{ gpuName }}云服务器</div>
            <div class="tab-detail-title-status">{{ statusFilter(status) }}</div>
          </div>
          <div class="tab-detail-content">
            <div class="tab-detail-content-item">
              <div class="list-item-left">基本信息</div>
              <div class="list-item-center">
                <div style="margin-bottom:14px">站点 : {{ stationName }}</div>
                <div>参数规格 : {{ setting }}</div>
              </div>
              <div class="list-item-right">
                <div style="margin-bottom:14px">云服务器ID : {{ serverId }}</div>
                <div>存储 : {{ storage }}</div>
              </div>
            </div>
            <div class="tab-detail-content-item">
              <div class="list-item-left">操作系统</div>
              <div class="list-item-center">
                <div>AI框架及版本 : {{ version }}</div>
              </div>
              <div class="list-item-right">
                <div>镜像 : {{ image }}</div>
              </div>
            </div>
            <div class="tab-detail-content-item">
              <div class="list-item-left">网络</div>
              <div class="list-item-center">
                <div>私网IP : {{ privateIp }}</div>
              </div>
              <div class="list-item-right">
                <div>弹性公网IP : {{ publicIp }}</div>
              </div>
            </div>
            <div class="tab-detail-content-item">
              <div class="list-item-left">付费信息</div>
              <div class="list-item-center">
                <div>付费类型 : {{ payType }}</div>
              </div>
              <div class="list-item-right">
                <div style="margin-bottom:14px">创建时间 : {{ createTime }}</div>
                <div>到期时间 : {{ deadline }}</div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Tab 2">
          Content of Tab Pane 2
        </a-tab-pane>
        <a-tab-pane key="3" tab="Tab 3">
          Content of Tab Pane 3
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import backIcon from '@/assets/svg/back.svg'
import { gpuList } from '@/api/Console/GpuCloudServe'
export default {
  name: 'GpuCloudServeDetail',
  filters: {
    statusFilter(val) {
      console.log(val)
    }
  },
  data() {
    return {
      backIcon,
      gpuName: '云服务器名',
      status: '运行中',
      stationName: '',
      setting: '',
      serverId: '',
      storage: '',
      version: '',
      image: '',
      privateIp: '',
      publicIp: '',
      payType: '',
      createTime: '',
      deadline: ''
    }
  },
  computed: {},
  mounted() {
    this.list()
  },
  methods: {
    callback(key) {
      console.log(key)
    },
    list() {
      const tmp = this
      const param = {
        pageSize: this.$route.query.pageSize,
        pageNum: this.$route.query.currentPage,
        stationId: this.$route.query.stationId,
        serverType: 2
      }
      gpuList(param)
        .then(response => {
          for (const item of response.data.rows) {
            if (item.serverUuid == tmp.$route.query.id) {
              tmp.gpuName = item.serverName
              tmp.status = item.serverStatus
              tmp.stationName = item.stationName
              tmp.setting = `${item.cpuNum}CPU , ${item.memoryNum}内存 , ${item.cardNum} * ${item.cardType}`
              tmp.serverId = item.id
              tmp.storage = `${item.storageType}  容量${item.storageNum}G`
              tmp.version = `${item.osName} : ${item.osVersion}`
              tmp.image = item.imageName
              tmp.privateIp = item.privateIp
              tmp.publicIp = item.publicIp
              //tmp.payType
              tmp.createTime = item.createTime
              // tmp.deadline
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped lang="less">
.page-content {
  width: 100%;
  .page-title {
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    margin-top: 14px;
    margin-right: 14px;
    font-size: 12px;
    padding-left: 30px;
    line-height: 40px;
    .page-title-left {
      color: #333;
    }
    .page-title-right {
      color: #33b0ed;
    }
  }
  .gpu-name {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    width: 100%;
    padding-left: 30px;
    margin-top: 6px;
  }
  .gpu-tab-content {
    margin-top: 6px;
    background-color: #fff;
    height: 100%;
    /deep/.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
      text-align: center;
      height: 36px;
      width: 100px;
      margin: 0;
      padding: 0 16px;
      line-height: 36px;
      background-color: #fff;
      border: 1px solid #edeff5;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    /deep/.ant-tabs-tab:hover {
      color: #33b0ed;
    }
    /deep/.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
      height: 36px;
    }
    /deep/.page-content .gpu-tab-content .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
      color: #fff;
      background-color: #33b0ed;
    }
    /deep/.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
      color: #fff;
      background-color: #33b0ed;
      width: 100px;
      height: 36px;
      border-color: none;
      border-bottom: none;
      margin: 0;
    }
    .tab-detail-title {
      height: 48px;
      background-color: #f6f8fd;
      line-height: 48px;
      padding-left: 32px;
      margin-left: 30px;
      margin-bottom: 32px;
      margin-right: 30px;
      display: flex;
      .tab-detail-title-name {
        font-size: 14px;
        color: #333;
      }
      .tab-detail-title-status {
        font-size: 12px;
        color: #35bb84;
        margin-left: 20px;
      }
    }
    .tab-detail-content {
      margin-left: 30px;
      margin-right: 30px;
      padding-left: 32px;
      margin-bottom: 100px;
      color: #333;
      .tab-detail-content-item {
        display: flex;
        border-bottom: 1px solid #f0f3f7;
        margin-bottom: 24px;
      }
      .list-item-left {
        font-size: 14px;
        width: 56px;
      }
      .list-item-center,
      .list-item-right {
        font-size: 12px;
        margin-bottom: 25px;
      }
      .list-item-center {
        width: 370px;
        margin-left: 30px;
        margin-right: 125px;
      }
    }
  }
}
</style>
